<template>
  <div class="crash-report mod-home">
    <el-form :inline="true" :model="form" size="small">
      <el-form-item class="sel-len" label="APP" size="small">
        <el-select v-model="app" placeholder="请选择" size="small" style="margin-right: 10px;">
          <el-option v-for="item in form.apps" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="sel-len" label="平台" size="small">
        <el-select v-model="plat" placeholder="请选择" size="small" @change="changPlat">
          <el-option v-for="item in form.plats" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="sel-len" label="时间" size="small">
        <el-radio-group v-model="form.timeSelect" @change="changHour">
          <el-radio-button label="1h"></el-radio-button>
          <el-radio-button label="6h"></el-radio-button>
          <el-radio-button label="1d"></el-radio-button>
          <el-radio-button label="8d"></el-radio-button>
          <el-radio-button label="14d"></el-radio-button>
          <el-radio-button label="30d"></el-radio-button>          
        </el-radio-group>
      </el-form-item>
      <el-form-item class="sel-len" label="自动刷新" size="small">
        <el-switch
          v-model="autorefresh"
          active-color="#13ce66" @change="changerefresh">
        </el-switch>        
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24" style="height:300px;">
        <div id="success-echart" style="width: 100%; height:100%;" v-loading="successLoading"></div>
      </el-col>
    </el-row>   
    <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
      <el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name" >
        <div class="tableMain" >
          <div class="tableTcp">
            <div class="tableTcpTitle">
              <div class="title">城市网络</div>
              <div class="colorList">
                <div class="colordiv">
                  <div class="colorli"><span class="color green"></span><span class="text"> 98%-100%</span></div>
                  <div class="colorli"><span class="color lightgreen"></span><span class="text"> 95%-98%</span></div>
                  <div class="colorli"><span class="color yellow"></span><span class="text"> 90%-95%</span></div>
                  <div class="colorli"><span class="color orange"></span><span class="text"> 80%-90%</span></div>
                  <div class="colorli"><span class="color red"></span><span class="text"> 0%-80%</span></div>
                </div>
                <div class="colordiv">
                  <div class="colorli"><span class="color green"></span><span class="text"> 0-1s</span></div>
                  <div class="colorli"><span class="color lightgreen"></span><span class="text"> 1-2s</span></div>
                  <div class="colorli"><span class="color yellow"></span><span class="text"> 2-3s</span></div>
                  <div class="colorli"><span class="color orange"></span><span class="text"> 3-4s</span></div>
                  <div class="colorli"><span class="color red"></span><span class="text"> 4s+</span></div>
                </div>
              </div>
            </div>
            <template>
              <el-table :data="tcpTableData1" class="tabledata" :default-sort = "{prop: 'date', order: 'descending'}" v-loading="isTcpLoading">
                <el-table-column prop="name" label="城市" > </el-table-column>
                <el-table-column label="成功率"  prop="rate" sortable> 
                  <template slot-scope="scope">
                    <span class="color green" v-if="scope.row.successStatus == 1"></span>
                    <span class="color lightgreen" v-if="scope.row.successStatus == 2"></span>
                    <span class="color yellow" v-if="scope.row.successStatus == 3"></span>
                    <span class="color orange" v-if="scope.row.successStatus == 4"></span>
                    <span class="color red" v-if="scope.row.successStatus == 5"></span>
                    <span class="text">{{ scope.row.rate }}%</span>
                  </template>
                </el-table-column>
                <el-table-column label="耗时"  prop="value" sortable>
                  <template slot-scope="scope">
                    <span class="color green" v-if="scope.row.ConsumeStatus == 1"></span>
                    <span class="color lightgreen" v-if="scope.row.ConsumeStatus == 2"></span>
                    <span class="color yellow" v-if="scope.row.ConsumeStatus == 3"></span>
                    <span class="color orange" v-if="scope.row.ConsumeStatus == 4"></span>
                    <span class="color red" v-if="scope.row.ConsumeStatus == 5"></span>
                    <span class="text">{{ scope.row.value }}s</span>
                  </template>
                </el-table-column> 
                <el-table-column prop="sum" label="请求数" sortable> </el-table-column>
                <el-table-column prop="success" label="成功数" sortable> </el-table-column>
              
              </el-table>
            </template>
          </div>
          <div class=" tableHttp">
            <div class="tableTcpTitle">
              <div class="title">省份网络</div>
              <div class="colorList">
                <div class="colordiv">
                  <div class="colorli"><span class="color green"></span><span class="text"> 98%-100%</span></div>
                  <div class="colorli"><span class="color lightgreen"></span><span class="text"> 95%-98%</span></div>
                  <div class="colorli"><span class="color yellow"></span><span class="text"> 90%-95%</span></div>
                  <div class="colorli"><span class="color orange"></span><span class="text"> 80%-90%</span></div>
                  <div class="colorli"><span class="color red"></span><span class="text"> 0%-80%</span></div>
                </div>
                <div class="colordiv">
                  <div class="colorli"><span class="color green"></span><span class="text"> 0-1s</span></div>
                  <div class="colorli"><span class="color lightgreen"></span><span class="text"> 1-2s</span></div>
                  <div class="colorli"><span class="color yellow"></span><span class="text"> 2-3s</span></div>
                  <div class="colorli"><span class="color orange"></span><span class="text"> 3-4s</span></div>
                  <div class="colorli"><span class="color red"></span><span class="text"> 4s+</span></div>
                </div>
              </div>
            </div>
            <template>
              <el-table :data="httpTableData1" class="tabledata" :default-sort = "{prop: 'date', order: 'descending'}" v-loading="isHttpLoading">
                <el-table-column prop="name" label="省份" > </el-table-column>
                <el-table-column label="成功率" prop="rate" sortable> 
                  <template slot-scope="scope">
                    <span class="color green" v-if="scope.row.successStatus == 1"></span>
                    <span class="color lightgreen" v-if="scope.row.successStatus == 2"></span>
                    <span class="color yellow" v-if="scope.row.successStatus == 3"></span>
                    <span class="color orange" v-if="scope.row.successStatus == 4"></span>
                    <span class="color red" v-if="scope.row.successStatus == 5"></span>
                    <span class="text">{{ scope.row.rate }}%</span>
                  </template>
                </el-table-column>
                <el-table-column label="耗时" prop="value" sortable>
                  <template slot-scope="scope">
                    <span class="color green" v-if="scope.row.ConsumeStatus == 1"></span>
                    <span class="color lightgreen" v-if="scope.row.ConsumeStatus == 2"></span>
                    <span class="color yellow" v-if="scope.row.ConsumeStatus == 3"></span>
                    <span class="color orange" v-if="scope.row.ConsumeStatus == 4"></span>
                    <span class="color red" v-if="scope.row.ConsumeStatus == 5"></span>
                    <span class="text">{{ scope.row.value }}s</span>
                  </template>
                </el-table-column>
                <el-table-column prop="sum" label="请求数" sortable> </el-table-column>
                <el-table-column prop="success" label="成功数" sortable> </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="optionVisible" :fullscreen="true" :center="true">
      <span slot="title">
        <el-button class="defined-close-btn" type="primary" @click="optionVisible = false">返回</el-button>
        <span class="err-title">{{optionTitle}}</span>
      </span>
      <el-table :data="optionData">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="right" inline class="table-form-expand">
              <el-form-item>
                <label>服务端时间</label>
                <span>{{ props.row.serviceTime }}</span>
              </el-form-item>
              <el-form-item>
                <label>osId</label>
                <span>{{ props.row.osId }}</span>
              </el-form-item>
              <el-form-item>
                <label>响应状态码</label>
                <span>{{ props.row.status }}</span>
              </el-form-item>
              <el-form-item>
                <label>运行商</label>
                <span>{{ props.row.operator }}</span>
              </el-form-item>
              <el-form-item class="line-block">
                <label>原始内容</label>
                <span class="line-break">{{ props.row.content }}</span>
              </el-form-item>
              <el-form-item>
                <label>城市</label>
                <span>{{ props.row.city }}</span>
              </el-form-item>
              <el-form-item>
                <label>省份</label>
                <span>{{ props.row.province }}</span>
              </el-form-item>
              <el-form-item>
                <label>国家</label>
                <span>{{ props.row.nation }}</span>
              </el-form-item>
              <el-form-item>
                <label>客户端IP</label>
                <span>{{ props.row.iP }}</span>
              </el-form-item>
              <el-form-item>
                <label>客户端时间</label>
                <span>{{ props.row.time }}</span>
              </el-form-item>
              <el-form-item>
                <label>响应时间</label>
                <span>{{ props.row.responseTime }}</span>
              </el-form-item>
              <el-form-item>
                <label>返回大小</label>
                <span>{{ props.row.contentLength }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备分辨率</label>
                <span>{{ props.row.screen }}</span>
              </el-form-item>
              <el-form-item>
                <label>操作系统版本</label>
                <span>{{ props.row.osVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>操作系统</label>
                <span>{{ props.row.os === '2' ? 'Android' : props.row.os }}</span>
              </el-form-item>
              <el-form-item>
                <label>网络类型</label>
                <span>{{ props.row.netType }}</span>
              </el-form-item>
              <el-form-item>
                <label>model</label>
                <span>{{ props.row.model }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备型号</label>
                <span>{{ props.row.machineModel }}</span>
              </el-form-item>
              <el-form-item>
                <label>imei</label>
                <span>{{ props.row.imei }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备id</label>
                <span>{{ props.row.deviceId }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备品牌</label>
                <span>{{ props.row.brand }}</span>
              </el-form-item>
              <el-form-item class="line-block">
                <label>内核版本</label>
                <span>{{ props.row.coreVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>页面相对路径</label>
                <span>{{ props.row.uRI }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用id</label>
                <span>{{ props.row.appId }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用版本</label>
                <span>{{ props.row.appVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用名称</label>
                <span>{{ props.row.appName }}</span>
              </el-form-item>
              <el-form-item>
                <label>dpid</label>
                <span>{{ props.row.dpid }}</span>
              </el-form-item>
              <el-form-item>
                <label>用户卡号</label>
                <span>{{ props.row.userID }}</span>
              </el-form-item>
            </el-form>
          </template> 
        </el-table-column>
        <el-table-column property="serviceTime" label="服务端时间" min-width="180" :formatter="formatTime"></el-table-column>
        <el-table-column property="osId" label="osId" min-width="60"></el-table-column>
        <el-table-column property="status" label="响应状态码" min-width="100"></el-table-column>
        <!-- <el-table-column property="content" label="原始内容" min-width="220" show-overflow-tooltip></el-table-column> -->
        <el-table-column property="operator" label="运行商" min-width="100"></el-table-column>
        <el-table-column property="city" label="城市" min-width="80"></el-table-column>
        <el-table-column property="province" label="省份" min-width="80"></el-table-column>
        <el-table-column property="nation" label="国家" min-width="80"></el-table-column>
        <el-table-column property="iP" label="客户端IP" min-width="140"></el-table-column>
        <el-table-column property="time" label="客户端时间" min-width="180" :formatter="formatTime"></el-table-column>
        <el-table-column property="responseTime" label="响应时间" min-width="110"></el-table-column>
        <el-table-column property="contentLength" label="返回大小" min-width="80"></el-table-column>
        <!-- <el-table-column property="screen" label="设备分辨率" min-width="100"></el-table-column> -->
        <!-- <el-table-column property="osVersion" label="操作系统版本" min-width="110"></el-table-column> -->
        <!-- <el-table-column property="os" label="操作系统" min-width="80"></el-table-column> -->
        <!-- <el-table-column property="netType" label="网络类型" min-width="80"></el-table-column> -->
        <!-- <el-table-column property="model" label="model" min-width="70"></el-table-column> -->
        <!-- <el-table-column property="machineModel" label="设备型号" min-width="160"></el-table-column> -->
        <!-- <el-table-column property="imei" label="imei" min-width="180"></el-table-column> -->
        <!-- <el-table-column property="deviceId" label="设备id" min-width="170"></el-table-column> -->
        <!-- <el-table-column property="coreVersion" label="内核版本" min-width="120" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column property="brand" label="设备品牌" min-width="90"></el-table-column> -->
        <!-- <el-table-column property="uRI" label="页面相对路径" min-width="220" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column property="appId" label="应用id" min-width="70"></el-table-column> -->
        <!-- <el-table-column property="appVersion" label="应用版本" min-width="80"></el-table-column> -->
        <!-- <el-table-column property="appName" label="应用名称" min-width="120"></el-table-column> -->
        <!-- <el-table-column property="dpid" label="dpid" min-width="300"></el-table-column> -->
        <!-- <el-table-column property="userID" label="用户卡号" min-width="120"></el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="optionParams.currPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="optionParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="optionParams.totalCount">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import 'echarts/map/js/china.js'
  import lodash from 'lodash'
  import moment from 'moment'
  const baseUrl = ''
 // 平台
  var apps = [
    {
      value: 'app',
      label: '无限极中国APP2.0'
    }
  ]
  var plats = [
    { value: '', label: '全部' },
    { value: 'Android', label: 'Android' },
    { value: 'iOS', label: 'iOS' }
  ]
  export default {

    data () {
      return {
        form: {
          apps: apps,
          plats: plats,
          timeSelect: '6h'
        },
        autorefresh: true,
        hour: 0,
        plat: '',
        app: '无限极中国APP2.0',
        conditionForm: {
          setapp: '',
          plant: '',
          version: ''
        },
        editableTabsValue2: '1',
        editableTabs2: [{
          title: '中国',
          name: '1'
        }],
        urls: {
          listUrl: this.$http.adornUrl(baseUrl + '/uba/list'),
          listProvinceUrl: this.$http.adornUrl(baseUrl + '/uba/listProvince'),
          test2Url: this.$http.adornUrl(baseUrl + '/uba/rate'),
          refreshInfoUrl: this.$http.adornUrl(baseUrl + '/autorefresh/getByModule'),
          changeUrl: this.$http.adornUrl(baseUrl + '/autorefresh/changeStatus')
        },
        interval: null,
        tcpTableData1: [],
        httpTableData1: [],
        successDateList: '',
        successnum: '',
        successLoading: true,
        isTcpLoading: true,
        isHttpLoading: true,
        styleColor: {
          nowColor: '#4793C0'
          // nowColor: '#3B73C3'
        },
        yMin: 0,
        optionVisible: false,
        optionTitle: '网络成功率列表',
        optionParams: {
          type: '',
          column: '',
          currPage: 1,
          pageSize: 10,
          totalCount: 0
        },
        optionData: [],
        endTime: ''
      }
    },
    activated () {
      this.init()
    },
    deactivated () {
      clearInterval(this.interval)
      this.interval = null
    },
    methods: {
      init () {
        var vm = this
        vm.$http.get(vm.urls.refreshInfoUrl + '?module=网络性能').then((response) => {
          var info = response.data
          var second = info.second * 1000
          if (info !== null) {
            vm.autorefresh = info.refresh
            if (vm.autorefresh) {
              vm.interval = setInterval(
                vm.initEcharts
              , second)
            } else {
              vm.interval = null
            }
          }
        })
        vm.initEcharts()
      },
      removeTab (targetName) {
        let tabs = this.editableTabs2
        let activeName = this.editableTabsValue2
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.editableTabsValue2 = activeName
        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName)
      },
      initEcharts () {
        var vm = this

        var url = vm.urls.listUrl + '?hour=' + vm.hour + '&plat=' + vm.plat
        vm.$http.get(url).then((response) => {
          var obj = response.data
          if (obj.code === 0) {
            vm.tcpTableData1 = obj.result
            vm.isTcpLoading = false
          }
        })

        var url1 = vm.urls.listProvinceUrl + '?hour=' + vm.hour + '&plat=' + vm.plat
        vm.$http.get(url1).then((response) => {
          var obj = response.data
          if (obj.code === 0) {
            vm.httpTableData1 = obj.result
            vm.isHttpLoading = false
          }
        })

        var url2 = vm.urls.test2Url + '?hour=' + vm.hour + '&plat=' + vm.plat
        vm.$http.get(url2).then((response) => {
          var obj = response.data
          if (obj.code === 0) {
            vm.analyzeTrendsResponseData(obj.result)
          }
        })
      },
      changHour (hour) {
        this.isTcpLoading = true
        this.isHttpLoading = true
        this.successLoading = true

        if (hour === '1h') {
          hour = 1
        } else if (hour === '6h') {
          hour = 6
        } else if (hour === '1d') {
          hour = 24
        } else if (hour === '8d') {
          hour = 192
        } else if (hour === '14d') {
          hour = 336
        } else if (hour === '30d') {
          hour = 720
        } else {
          hour = 0
        }
        this.hour = hour
        this.initEcharts()
      },
      changPlat (plat) {
        this.isTcpLoading = true
        this.isHttpLoading = true
        this.successLoading = true

        this.plat = plat
        this.initEcharts()
      },
      changerefresh () {
        var vm = this
        vm.$http.get(vm.urls.changeUrl + '?module=网络性能&refresh=' + vm.autorefresh).then((response) => {
          var info = response.data.data
          var second = info.second * 1000
          if (vm.autorefresh) {
            vm.interval = setInterval(
              vm.initEcharts
            , second)
          } else {
            clearInterval(vm.interval)
          }
        })
      },
       // 渲染启动数量图表
      getTrendsEchart () {
        var vm = this
        let isShow = vm.successnum.length === 0
        var option2 = {
          title: [{
            text: '网络成功率 (%)',
            left: '0',
            textStyle: {
              fontSize: 14
            }
          }, {
            show: isShow,
            text: '暂无数据',
            top: '40%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 0,
            data: ['当前值'],
            itemGap: 10
          },
          color: [vm.styleColor.nowColor],
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }],
          xAxis: {
            boundaryGap: false,
            data: vm.successDateList,
            axisLabel: {
              formatter: function (params) {
                return params.replace(' ', '\n')
              }
            }
          },
          yAxis: {
            axisTick: {
              interval: 0
            },
            splitLine: {
              show: false
            },
            min: vm.yMin
          },
          grid: [{
            top: '12%',
            left: '50px',
            right: 20
          }],
          series: [{
            name: '当前值',
            type: 'line',
            showSymbol: false,
            data: vm.successnum,
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              }
            }
          }]
        }
        echarts.init(document.getElementById('success-echart')).setOption(option2)
        vm.successLoading = false
        echarts.init(document.getElementById('success-echart')).on('click', function (params) {
          vm.showDetail(params)
        })
      },
      analyzeTrendsResponseData (data) {
        var successtimes = []
        var successnum = []
        for (let success in data) {
          successtimes.push(data[success].updatetime)
          successnum.push(data[success].rate)
        }
        this.successDateList = successtimes
        this.successnum = successnum

        let newNum = lodash.sortBy(successnum, function (item) {
          return item
        })
        this.yMin = newNum[0]
        this.getTrendsEchart()
      },
      showDetail (row) {
        var vm = this
        if (vm.moduleTitle === '品牌') {
          vm.optionParams.type = 'Brand'
          vm.optionTitle = '品牌：' + row.name
        } else if (vm.moduleTitle === 'appVersion') {
          vm.optionParams.type = 'AppVersion'
          vm.optionTitle = 'appVersion：' + row.name
        } else if (vm.moduleTitle === 'URI') {
          vm.optionParams.type = 'URI'
          vm.optionTitle = 'URI：' + row.name
        }
        vm.optionParams.column = row.name
        vm.getOptionData()
      },
      // 获取模块中某个选项的数据
      getOptionData () {
        var vm = this
        var params = []
        var url = '/uba/getRateCodeInfos'
        
        if (vm.optionParams.type !== '' && vm.optionParams.type !== null) {
          params.push('type=' + vm.optionParams.type)
        }

        if (vm.optionParams.column !== '' && vm.optionParams.column !== null) {
          params.push('column=' + vm.optionParams.column)
        }

        if (vm.optionParams.currPage !== '' && vm.optionParams.currPage !== null) {
          params.push('currPage=' + vm.optionParams.currPage)
        }

        if (vm.optionParams.pageSize !== '' && vm.optionParams.pageSize !== null) {
          params.push('pageSize=' + vm.optionParams.pageSize)
        }

        params.push('endTime=' + vm.optionParams.column)
        url += (params.length > 0 ? '?' + params.join('&') : '')
        console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.optionData = data.data.list
            vm.optionParams.totalCount = data.data.totalCount
            vm.optionVisible = true
          }
        })
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        var vm = this
        vm.optionParams.pageSize = val
        vm.getOptionData()
      },
      handleCurrentChange (val) {
        console.log(`当前页：${val}`)
        var vm = this
        vm.optionParams.currPage = val
        vm.getOptionData()
      },
      formatTime (row, column, cellValue, index) {
        if (cellValue !== null) {
          return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
        } else {
          return cellValue
        }
      }
    }
  }
</script>

<style   lang="scss">
.mod-home{
  .el-form{
    text-align: right;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }
}

.tableMain{
  overflow: hidden;
  .color{
    width: 10px;
    height: 10px;
    text-align: center;
    margin-right: 6px;
    display: inline-block;
    line-height: 24px;
    padding-top: 8px;
  }
  .green{
    background: #339205;
  }
  .lightgreen{
    background: #67C23A;
  }
  .yellow{
    background: #ffeb3b;
  }
  .orange{
    background: #ff5722;
  }
  .red{
    background: #f44336;
  }
  .title{
    // display: inline-block;
    padding: 4px 14px 0;
    float: left;
  }
  .colorList{
    // display: inline-block;
    float: left;
    .colorli{
      display: inline-block;
      margin-right: 8px;
      .text{
        display: inline-block; 
        line-height: 24px;
        font-size: 12px;
        min-width:60px; 
      }
    }
  }
  .tabledata{
    .text{
      display: inline-block; 
      line-height: 24px;
    }
  }
  .tableTcp{
    width: 49%;
    border:1px solid #eee;
    float: left;
    .tableTcpTitle{
      padding: 10px 5px;
      overflow: hidden;
    }
  }
  .tableHttp{
    width: 49%;
    margin-left: 10px;
    border:1px solid #eee;
    float: left;
    .tableTcpTitle{
      padding: 10px 5px;
      overflow: hidden;
      .title{
        padding: 6px 14px ;
      }
    }
  }
}
.crash-report > .el-form{
  text-align: right;
  border-bottom: 1px solid #eee;
}
.crash-report .el-button{
  padding: 8px 15px;
  font-size: 14px;
}
.crash-report .el-row{
  margin-bottom: 20px;
}
.crash-report .http-code-title{
  font-size: 18px;
}
.crash-report .el-col{
  position: relative;
}
.crash-report .btn-center{
  position: absolute;
  top: 1%;
  right: 10%;
  z-index: 100;
  padding: 5px 10px;
  font-size: 22px;
  border: none;
}
.crash-report .table-form-expand{
  font-size: 0;
}
.crash-report .table-form-expand label {
  display: inline-block;
  width: 110px;
  color: #99a9bf;
  text-align: right;
  font-size: 14px;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.crash-report .table-form-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.crash-report .table-form-expand .el-form-item.line-block{
  display: block;
  width: 100%;
}
.line-break{
  word-break:break-all;
  word-wrap:break-word
}
.defined-close-btn{
  position: absolute;
  left: 15px;
  top: 17px;
}
.err-title{
  font-size: 16px;
  margin-left: 10px;
}
</style>

